<template>
  <el-card shadow="never">
    <!-- 特色推荐 -->
    <div class="featured-section">
      <el-carousel :interval="3000" height="400px">
        <el-carousel-item v-for="item in featuredItems" :key="item.id">
          <div class="carousel-item">
            <img :src="item.image" :alt="item.title" />
            <div class="carousel-content" @click="router.push('/attraction-view')">
              <h3>{{ item.title }}</h3>
              <p>{{ item.description }}</p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 热门景点 -->
    <div class="popular-section">
      <el-row :gutter="20">
        <el-col v-for="attraction in popularAttractions" :key="attraction.id" :xs="24" :sm="12" :md="8" :lg="6">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <img :src="attraction.image" class="attraction-image" :alt="attraction.name" />
            <div style="padding: 14px">
              <h3>{{ attraction.name }}</h3>
              <div class="attraction-meta">
                <span>
                  <el-icon><Location /></el-icon>
                  {{ attraction.location }}
                </span>
                <span>
                  <el-icon><Star /></el-icon>
                  {{ attraction.rating }}
                </span>
              </div>
              <div class="attraction-desc">
                {{ attraction.description }}
              </div>
              <div class="attraction-actions">
                <el-button type="primary" icon="view" plain @click="router.push('/attraction-view')"
                  >查看详情</el-button
                >
                <el-button type="success" icon="star" plain @click="router.push('/favorite')">收藏</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 底部信息 -->
    <div class="footer-content">
      <div class="footer-section">
        <h3>关于我们</h3>
        <p>致力于推广乡村旅游，发现美丽乡村之美</p>
      </div>
      <div class="footer-section">
        <h3>联系我们</h3>
        <p>邮箱: contact@xiangcunyou.com</p>
        <p>电话: 400-123-4567</p>
      </div>
      <div class="footer-section">
        <h3>关注我们</h3>
        <div class="social-icons">
          <el-icon><ChatDotRound /></el-icon>
          <el-icon><Promotion /></el-icon>
          <el-icon><VideoCamera /></el-icon>
        </div>
      </div>
    </div>
    <div class="copyright">© 2025 乡村旅游系统 版权所有</div>
  </el-card>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const featuredItems = [
  {
    id: 1,
    title: '桃花村',
    description: '春季桃花盛开，景色宜人，是踏青赏花的好去处',
    image: 'http://localhost:8080/uploads/0bce3f7974a48d3ae10bed3ac2f08d0b.jpg'
  },
  {
    id: 2,
    title: '田园风光',
    description: '体验纯正的乡村生活，感受大自然的魅力',
    image: 'http://localhost:8080/uploads/a65ca17ef01385f0b6d3dd3d2c6ea82b.jpg'
  },
  {
    id: 3,
    title: '农家美食',
    description: '品尝地道农家菜，体验乡村美食文化',
    image: 'http://localhost:8080/uploads/3e9fc8ba76e69769ab73e831d465c911.jpg'
  }
]

const popularAttractions = [
  {
    id: 1,
    name: '桃花村',
    location: '江苏省苏州市',
    rating: 4.8,
    description: '春季桃花盛开，景色宜人，是踏青赏花的好去处',
    image: 'http://localhost:8080/uploads/611e4b6445f22323907a15ad8e3e2c16.jpg'
  },
  {
    id: 2,
    name: '田园风光',
    location: '浙江省杭州市',
    rating: 4.7,
    description: '体验纯正的乡村生活，感受大自然的魅力',
    image: 'http://localhost:8080/uploads/a65ca17ef01385f0b6d3dd3d2c6ea82b.jpg'
  },
  {
    id: 3,
    name: '农家美食',
    location: '安徽省黄山市',
    rating: 4.6,
    description: '品尝地道农家菜，体验乡村美食文化',
    image: 'http://localhost:8080/uploads/3e9fc8ba76e69769ab73e831d465c911.jpg'
  },
  {
    id: 4,
    name: '古村落',
    location: '上海市崇明区',
    rating: 4.5,
    description: '探索历史悠久的古村落，感受传统文化',
    image: 'http://localhost:8080/uploads/ed77653e10f7cab662f2cbcb452288ca.jpg'
  }
]
</script>

<style scoped>
.featured-section {
  margin-bottom: 40px;
}

.carousel-item {
  position: relative;
  height: 100%;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}

.popular-section {
  padding: 0 20px;
  margin-bottom: 40px;
}

.attraction-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.attraction-meta {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  color: #909399;
}

.attraction-desc {
  margin: 10px 0;
  color: #606266;
  height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.attraction-actions {
  display: flex;
  justify-content: space-between;
}

.footer-content {
  padding: 40px 20px 20px;
  background-color: #f5f7fa;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer-section {
  flex: 1;
  min-width: 200px;
  margin-bottom: 20px;
}

.footer-section h3 {
  margin-bottom: 15px;
  color: #303133;
}

.social-icons {
  display: flex;
  gap: 15px;
  font-size: 20px;
  color: #606266;
}

.copyright {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
  color: #909399;
}
</style>
